<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">


<title>移动端测试03</title>
<style type="text/css">
body{ margin: 0; padding: 0; min-width: 320px; max-width: 1080px; overflow-x: hidden;}
img{ width: 100px; height: 100px; }
/*文字和图片不能选择*/
.none-select{ 
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 竖屏 */
@media all and (orientation: portrait) {
	body{
		color:  #9941AB;
	}
}
/* 横屏 */
@media all and (orientation: landscape) {
    body{
		color: red;
	}
}


</style>
</head>
<body>
<div class="none-select">
    <div>11</div>
    <div>22</div>
</div>

<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

<hr />

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选文件 -->
<input type="file" multiple>

<hr />

<!-- 纯数字带#和* -->
<input type="tel">

<!-- 纯数字 -->
<input type="number" pattern="\d*">

<hr />

<!-- 打开微信 -->
<a href="weixin://">打开微信</a>

<!-- 打开支付宝 -->
<a href="alipays://">打开支付宝</a>

<!-- 打开支付宝的扫一扫 -->
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫</a>

<!-- 打开支付宝的蚂蚁森林 -->
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>


<hr />

<input autocapitalize="off" autocorrect="off" value='禁止字母大写'>


<div style="-webkit-tap-highlight-color: transparent;">禁止高亮显示-Y</div>
<div>禁止高亮显示-N</div>

<script type="text/javascript">
window.addEventListener('orientationchange', function () {
	console.log(screen.orientation, screen.orientation.angle);//90度时为横屏
});
</script>

</body>
</html>
